//我们使用立即执行函数来按照功能
//将代码分开

//先定义全局的变量

//歌曲的列表
//其中歌曲包括
//musicName
//musicSinger
//musicUrl
//musicCover
//musicLrc
//
const musicList = [
  {
    musicName:"把回忆拼接好给你",
    musicSinger:"王壹浪",
    musicUrl:"https://oss.yhuayi.com/my_self/video/bhypjhgn.mp3",
    musicCover:"https://p1.music.126.net/CBx2K_jEN3SNWwYztagPPw==/109951164485969446.jpg",
    musicTimer:"06:21",
    musicLrc:`[00:00.000] 
    作曲 : 童子-T[00:00.670] 
    [00:02.12]原曲：願い~あの頃のキミへ~
    [00:12.15] 中文填词：一只然[00:15.23]OP（原属词曲版权公司）
    [00:19.49]本作品经过原词曲作者以及版权公司授权
    [00:27.80]我们之间的回忆
    [00:30.55]全部都小心地收集
    [00:33.67]我总是偷偷地哭泣
    [00:36.56]像倦鸟失了归期
    [00:39.87]但愿我相信的爱情
    [00:42.52]结局紧握在我手心
    [00:45.30]时光匆匆却没有遗失过去
    [00:55.25]希望我们 有光明的未来
    [00:58.02]还有能够装下星空的期待
    [01:00.93]可现实为何让我感到如此懈怠
    [01:04.05]总怀念相遇时我们无视落叶和人海
    [01:07.66]是你让我勇敢不再像颗尘埃
    [01:10.38]是你常帮我照料装着梦的盆栽
    [01:13.25]每一天我们都是如此愉快
    [01:16.05]一直到天色渐晚看着落日无奈离开
    [01:19.65]我知道你爱集邮爱笑甚至爱发呆
    [01:22.39]我知道你怕草虫还有夜晚的妖怪
    [01:25.35]我喜欢你有一点心不在焉的状态
    [01:28.53]看起来像个回到七岁时候的小孩
    [01:31.64]该如何将我这份感情向你告白
    [01:34.12]喜欢却又不敢爱
    [01:35.69]直到整个宇宙
    [01:37.57]在为我焦虑失神慌张之中醒来
    [01:40.33]就像是黑暗过后黎明盛开
    [01:43.35]我们之间的回忆
    [01:45.47]全部都小心地收集
    [01:48.39]我总是偷偷地哭泣
    [01:51.47]像倦鸟失了归期
    [01:54.29]但愿我相信的爱情
    [01:57.28]结局紧握在我手心
    [02:00.32]时光匆匆却没有遗失过去
    [02:18.74]那天你在雨后街角答应接受我的爱
    [02:22.39]那一刻我的世界有了色彩
    [02:25.33]这一生无法忘记关于澄蓝色的你
    [02:28.37]像一份礼物悄然呈现在我的境遇
    [02:31.22]我们从清晨起玩一整天游戏
    [02:34.37]到夜晚一起看我最爱的剧
    [02:37.38]能够拥有这些已足够幸运
    [02:40.21]我已经不再期待其他什么东西
    [02:43.67]我们也经常争执互相不接电话
    [02:46.45]在同一房间终于呼叫冷漠抵达
    [02:49.36]也曾想过以后生活没有人牵挂
    [02:52.19]把爱扔掉只剩一块残酷伤疤
    [02:55.67]而那些你送我的梦，教我折的花
    [02:58.82]逃亡的盛夏
    [03:00.28]在夜空隐没之际为我点燃烟花
    [03:02.99]寂寞时让我把快乐拼起来吧
    [03:06.51]我们之间的回忆
    [03:09.37]全部都小心地收集
    [03:12.31]我总是偷偷地哭泣
    [03:15.32]像倦鸟失了归期
    [03:18.29]但愿我相信的爱情
    [03:21.23]结局紧握在我手心
    [03:24.23]时光匆匆却没有遗失过去
    [03:30.87]我们可以就像是孩子一样成长
    [03:36.49]永远无所畏惧义无反顾向着未知的前方
    [03:42.64]原来我们每天努力长成看似大人的模样
    [03:48.73]为了可以一起跨越山和海洋
    [03:54.08]那时的我每天都祈祷 实现这个梦想
    [04:01.82]现在的你还好吗
    [04:03.85]是否还会像从前一样的爱笑
    [04:07.42]现在的你还好吗
    [04:09.73]当你径直在我面前坦言放下
    [04:13.32]现在的你还好吗
    [04:15.63]是否像从前一样有无限的温柔啊
    [04:19.45]现在的你还好吗
    [04:22.42]愿你能保持月亮般的心，要爱自己啊
    [04:27.80]我们之间的回忆
    [04:30.28]全部都小心地收集
    [04:33.29]我总是偷偷地哭泣
    [04:36.28]像倦鸟失了归期
    [04:39.58]但愿我相信的爱情
    [04:42.12]结局紧握在我手心
    [04:45.06]时光匆匆却没有遗失过去
    [04:51.92]独自收集两个人之间的回忆
    [04:54.63]即使每当到这时候我都会哭泣
    [04:57.61]为何一切，变得如此，无法回到过去
    [05:03.99]但我仍愿意感谢你给过我爱情
    [05:06.56]每一场风景都是我们爱的证明
    [05:09.66]就算如今，天各一方，祝你余生动听啊
    [05:15.75][05:15.90]独自收集两个人之间的回忆
    [05:18.60]即使每当到这时候我都会哭泣
    [05:21.82]为何一切，变得如此，无法回到过去
    [05:27.80]但我仍愿意感谢你给过我爱情
    [05:30.63]每一场风景都是我们爱的证明
    [05:33.61]就算如今，天各一方，把回忆拼好给你
    [05:50.50]企划：谢宇航 / 牛雪吟 / 裘小静
    [05:55.04]制作人：王佳依
    [05:58.38]监制：姚政
    [06:01.98]编曲：闫津
    [06:04.51]录音：陈程
    [06:08.38]缩混：陈程
    [06:11.35]封面设计：刘馨宇
    [06:15.65]网易云音乐特别企划“听，海风”
    [06:18.00][99:00.01]本歌曲来自〖网易音乐人〗
    [99:00.02]10亿现金激励，千亿流量扶持！
    [99:00.03]合作：st399@vip.163.com`
  },
  {
    musicName:"太阳(正式版)",
    musicSinger:"曲肖冰",
    musicUrl:"https://oss.yhuayi.com/my_self/video/ty.mp3",
    musicCover:"https://imgessl.kugou.com/stdmusic/20190923/20190923164809407876.jpg",
    musicTimer:"04:17",
    musicLrc:`[00:00.00]太阳 (正式版) - 曲肖冰
              [00:05.47]词：邱振哲
              [00:10.95]曲：邱振哲
              [00:16.42]你总感到落寞沮丧
              [00:19.36]你总感到失望
              [00:22.63]对于人生未来总有太多 迷惘
              [00:31.83]你总伪装自己不痛
              [00:34.89]你总笑着逞强
              [00:38.09]对于爱情害怕触碰
              [00:42.80]放弃挣扎
              [00:46.70]你看着我眼睛
              [00:50.60]你记着我声音
              [00:54.37]无畏风雨
              [00:56.21]别忘记还有我站在这里
              [01:05.16]我只想做你的太阳
              [01:07.63]你的太阳
              [01:09.30]在你的心里呀
              [01:11.22]在你的心底呀
              [01:13.15]不管是多远的远方
              [01:17.06]不要害怕我在身旁
              [01:20.85]想做你的太阳
              [01:23.11]你的太阳
              [01:24.78]在你的心里呀
              [01:26.68]在你的心底呀
              [01:28.65]就算不能在你身旁
              [01:32.47]也要奋力为你而 发光
              [01:45.39]你总感到落寞沮丧
              [01:48.36]你总感到失望
              [01:51.66]对于人生未来
              [01:54.06]总有太多 迷惘
              [02:00.88]你总伪装自己不痛
              [02:03.77]你总笑着逞强
              [02:07.35]对于爱情害怕触碰
              [02:11.89]放弃挣扎
              [02:15.83]你看着我眼睛
              [02:19.27]你记着我声音啊
              [02:23.45]无畏风雨
              [02:25.25]别忘记还有我站在这里
              [02:34.21]我只想做你的太阳
              [02:36.75]你的太阳
              [02:38.37]在你的心里呀
              [02:40.34]在你的心底呀
              [02:42.29]不管是多远的远方
              [02:46.09]不要害怕我在身旁
              [02:50.02]想做你的太阳
              [02:52.19]你的太阳
              [02:53.89]在你的心里呀
              [02:55.85]在你的心底呀
              [02:57.80]就算不能在你身旁
              [03:01.65]也要奋力为你而 发光
              [03:06.95]也许有一天你不再记得我
              [03:10.34]关于我们之间所有的所有
              [03:14.29]没关系 只要你幸福就够
              [03:24.33]我只想做你的太阳
              [03:27.04]你的太阳
              [03:28.69]在你的心里呀
              [03:30.63]在你的心底呀
              [03:32.82]不管是多远的远方
              [03:36.40]不要害怕我在身旁
              [03:40.19]想做你的太阳
              [03:42.53]你的太阳
              [03:44.18]在你的心里呀
              [03:46.09]在你的心底呀
              [03:48.29]就算不能在你身旁
              [03:51.90]我也要奋力为你而
              [03:56.82]发光`
  },
  {
    musicName:"用力活着",
    musicSinger:"张茜",
    musicUrl:"https://oss.yhuayi.com/my_self/video/ylhz.mp3",
    musicCover:"https://imgessl.kugou.com/stdmusic/20200728/20200728204904931197.jpg",
    musicTimer:"04:23",
    musicLrc:`[00:00.00]用力活着 - 张茜
              [00:01.29]词：徐杰
              [00:02.59]曲：蔡华垒
              [00:03.89]编曲：黄楚权
              [00:05.18]制作人：李九鸣
              [00:06.48]监制：张加
              [00:07.78]吉他：路野/张怀元
              [00:09.07]和声：姚斯婷
              [00:10.37]设计：温德飞
              [00:11.67]录音助理：朱合理@101studio
              [00:12.97]录音：张加@101studio
              [00:14.26]混音：张加@101studio
              [00:15.56]OP：919 Music Group Co.,Ltd
              [00:16.86]我们都在 用力的活着
              [00:24.80]酸甜苦辣里 醒过也醉过
              [00:32.94]也曾倔强脆弱 依然执着
              [00:39.01]相信花开以后 会结果
              [00:49.04]我们都在 用力的活着
              [00:57.07]爱恨成败 里 赢过也输过
              [01:05.05]也曾灿烂失落 无悔选择
              [01:11.03]相信磨难历尽 是收获
              [01:19.12]成长的路上 有几程曲折
              [01:23.56]我以 汗水浇灌 梦想花朵
              [01:27.17]任凭谁冷眼 嘲我或轻我
              [01:31.49]都会风轻云淡 一笑而过
              [01:35.04]在我的心里 有另一个我
              [01:39.46]陪我 共同面对 孤单寂寞
              [01:43.11]当现实背叛 累了倦了痛了
              [01:46.88]学会洒脱
              [02:24.86]我们都在 用力的活着
              [02:33.02]爱恨成败 里 赢过也输过
              [02:41.05]也曾灿烂失落 无悔选择
              [02:47.06]相信磨难历尽 是收获
              [02:55.10]成长的路上 有几程曲折
              [02:59.53]我以 汗水浇灌 梦想花朵
              [03:03.11]任凭谁冷眼 嘲我或轻我
              [03:07.46]都会风轻云淡 一笑而过
              [03:11.13]在我的心里 有另一个我
              [03:15.41]陪我 共同面对 孤单寂寞
              [03:19.13]当现实背叛 累了倦了痛了
              [03:22.96]学会洒脱
              [03:27.03]成长的路上 有几程曲折
              [03:31.45]我以 汗水浇灌 梦想花朵
              [03:35.15]任凭谁冷眼 嘲我或轻我
              [03:39.54]都会风轻云淡 一笑而过
              [03:43.01]在我的心里 有另一个我
              [03:47.21]陪我 共同面对 孤单寂寞
              [03:51.18]当现实背叛 累了倦了痛了
              [03:54.86]学会洒脱
              [03:58.99]当现实背叛 累了倦了痛了
              [04:02.93]学会洒脱`
  },
  {
    musicName:"倒数",
    musicSinger:"邓紫棋",
    musicUrl:"./media/ds.mp3",
    musicCover:"https://p1.music.126.net/tXCIFsVDK6IKcQ9YWxwOEg==/109951163523944497.jpg",
    musicTimer:"04:17",
    musicLrc:`[00:00.00]G.E.M.邓紫棋 - 倒数
              [00:02.00]作词：G.E.M.邓紫棋
              [00:04.00]作曲：G.E.M.邓紫棋、Lupo Groinig
              [00:06.00]编曲：Lupo Groinig
              [00:07.00]监制：Lupo Groinig
              [00:08.00]歌词编辑：果果
              [00:09.00]QQ:765708831
              [00:10.00]Lrc歌词网：www.90lrc.cn
              [00:11.88]还没到的樱花季
              [00:14.60]还没用的照相机
              [00:17.43]还没光临的餐厅
              [00:20.23]还在期待 有着你的旅行
              [00:23.43]等待日落的巴黎
              [00:26.21]铁塔之下牵着你
              [00:29.11]等待说着我愿意
              [00:32.00]等待未来 每天身边有你
              [00:34.60]一点一滴每一天珍惜
              [00:38.68]怕突然来不及 好好的爱你
              [00:44.60]时针一直倒数着
              [00:47.71]我们剩下的快乐
              [00:50.59]此刻相拥的狂热
              [00:53.52]却永远都深刻
              [00:56.43]心跳一直倒数着
              [00:59.35]生命剩下的温热
              [01:02.22]至少用力地爱着
              [01:05.16]还乌黑的头发
              [01:08.20]有你就不怕白了
              [01:10.40]漆黑过后是旭日
              [01:13.16]泪流以后是坚持
              [01:16.01]真的爱是日复日
              [01:18.73]从不放弃 重复说你愿意
              [01:22.09]还没退化的眼睛
              [01:24.83]抓紧时间看看你
              [01:27.84]爱是从来不止息
              [01:30.68]一个风景 每天新的生命
              [01:33.37]一点一滴每一天珍惜
              [01:37.34]用尽每一口气 好好的爱你
              [01:43.14]时针一直倒数着
              [01:46.22]我们剩下的快乐
              [01:49.12]此刻相拥的狂热
              [01:52.00]却永远都深刻
              [01:54.93]心跳一直倒数着
              [01:57.91]生命剩下的温热
              [02:00.72]至少用力地爱着
              [02:03.78]还乌黑的头发
              [02:06.72]有你就不怕白了
              [02:09.58]咖啡再不喝就酸了
              [02:12.40]晚餐再不吃就冷了
              [02:15.26]爱着为什么不说呢
              [02:17.41]难道错过了才来后悔着
              [02:21.21]谁梦未实现就醒了
              [02:23.97]谁心没开过就灰了
              [02:26.97]追逐爱的旅途曲折
              [02:29.12]就算再曲折为你都值得
              [02:32.08]一点一滴每一天珍惜
              [02:35.79]用尽每一口气 好好的爱你
              [02:41.77]时针一直倒数着
              [02:44.77]我们剩下的快乐
              [02:47.59]此刻相拥的狂热
              [02:50.46]却永远都深刻
              [02:53.51]心跳一直倒数着
              [02:56.44]生命剩下的温热
              [02:59.34]至少痛并快乐着
              [03:02.24]爱过才算活着
              [03:05.14]有你别无所求了
              [03:11.01]有你别无所求了
              [03:16.81]有你别无所求了
              [03:22.48]有你别无所求了
              [03:28.65]有你别无所求了
              [03:34.31]有你别无所求了`
  },
  {
    musicName:"我们的纪念",
    musicSinger:"徐薇",
    musicUrl:"./media/wmdjn.m4a",
    musicCover:"https://imge.kugou.com/stdmusic/20190812/20190812195002720970.jpg",
    musicTimer:"04:17",
    musicLrc:`[00:00.29]徐薇 - 我们的纪念
[00:01.13]作词：李雅微
[00:01.35]作曲：李雅微
[00:01.57]原唱：李雅微
[00:02.29]编曲：Dadz
[00:02.96]混缩：王博
[00:03.13]Studio：57号工作室
[00:03.40]制作人：王博
[00:03.96]摄影：林意
[00:04.68]文案：魏爽
[00:04.84]设计：张金林
[00:05.07]统筹：赵晨霖
[00:17.71]数不清的泪
[00:21.04]我又哭了好几回
[00:25.55]幻化成蝶
[00:29.33]停留在这片落叶
[00:33.72]被风化的雪
[00:37.61]埋藏在千年以前
[00:42.18]我用尽一生的思念
[00:46.19]只为等着你出现
[00:50.42]回忆渐渐凋谢落在我身边
[00:58.28]唤不醒原来还跳动的画面
[01:06.13]就让我留在轮回的边缘
[01:11.30]等一道光线
[01:14.81]看见某年某月我们之间
[01:19.20]曾经说过的预言
[01:23.10]就让他带走你的那瞬间
[01:27.44]成为我们的纪念
[01:31.96]谁能发现我的世界
[01:35.80]曾经有过你的脸
[01:57.14]数不清的泪
[02:00.36]我又哭了好几回
[02:04.92]幻化成蝶
[02:08.64]停留在这片落叶
[02:13.20]被风化的雪
[02:16.92]埋藏在千年以前
[02:21.48]我用尽一生的思念
[02:25.54]只为等着你出现
[02:29.49]回忆渐渐凋谢落在我身边
[02:37.62]唤不醒原来还跳动的画面
[02:45.90]就让我留在轮回的边缘
[02:50.63]等一道光线
[02:54.35]看见某年某月我们之间
[02:58.52]曾经说过的预言
[03:02.52]就让他带走你的那瞬间
[03:06.80]成为我们的纪念
[03:11.20]谁能发现我的世界
[03:15.16]曾经有过你的脸
[03:41.10]就让我留在轮回的边缘
[03:45.39]等一道光线
[03:48.94]看见某年某月我们之间
[03:53.38]曾经有过的预言
[03:57.22]就让他带走你的那瞬间
[04:01.55]成为我们的纪念
[04:06.05]谁能发现我的世界
[04:09.94]曾经有过你的脸`
  },
  {
    musicName:"我会谢谢你",
    musicSinger:"王艳薇",
    musicUrl:"https://oss.yhuayi.com/my_self/video/whxxn.mp3",
    musicCover:"https://p2.music.126.net/XHel9lbHQA6WFBuaNTQcww==/109951165993008118.jpg",
    musicTimer:"03:49",
    musicLrc:`
    [ti:我会谢谢你]
[ar:王艳薇]
[al:我会谢谢你]
[by:xianjie_karakal]
[offset:0]
[00:00.00]我会谢谢你 - 王艳薇 (Evangeline)
[00:02.44]词：王艳薇
[00:04.88]曲：王艳薇
[00:07.32]曾经我用直觉 来到你身旁
[00:14.36]
[00:18.53]静静坐着
[00:20.20]
[00:21.71]互相说心事 很简单的
[00:27.40]
[00:32.50]过了好几年 坐同一个位置
[00:40.30]
[00:41.83]你把门打开 说
[00:45.66]今天好吗 过得好吗
[00:51.22]这样的礼尚往来 今天后就不在
[00:57.14]
[00:57.92]我会谢 谢 你给我的快乐
[01:04.28]我会谢 谢 你给我最残酷的
[01:10.38]字里行间
[01:11.70]引导 要我相信你是爱我
[01:16.38]抱歉 离开这 别打扰我
[01:22.39]
[01:23.24]我会 珍 惜 我给你的信赖
[01:29.43]纤细敏感的那一块 被击碎了
[01:35.51]你布局了太多
[01:38.44]我 没必要为你停留
[01:41.07]
[01:41.64]我把话说完 把你给放开
[01:49.82]
[01:54.75]梦见你的样子
[01:58.59]
[01:59.12]还是一样的
[02:02.20]
[02:05.55]我们说好的 要吹吹风
[02:11.17]
[02:12.36]我还记得
[02:14.60]
[02:20.00]我睁开了眼
[02:23.48]回忆昨天我们
[02:26.60]
[02:29.20]曾经安心的 那 一个人
[02:34.32]
[02:35.27]那一个人 让我彻彻底底醒来
[02:41.11]
[02:41.66]一切都瓦解了
[02:44.40]
[02:45.24]我会谢 谢 你给我的快乐
[02:50.90]
[02:51.53]我会谢 谢 你给我最残酷的
[02:57.67]字里行间
[02:59.18]引导 要我相信你是爱我
[03:03.68]抱歉 离开这 别打扰我
[03:09.70]
[03:10.43]我会 珍 惜 我给你的信赖
[03:16.23]
[03:16.73]纤细敏感的那一块 被击碎了
[03:22.95]你布局了太多
[03:25.29]我 没必要为你停留
[03:28.41]
[03:28.95]我把话说完 把你给放开
    `
  },
  {
    musicName:"Take My Hand",
    musicSinger:"DAISHI DANCE、Cécile Corbel",
    musicUrl:"https://oss.yhuayi.com/my_self/video/take%20my%20hand.mp3",
    musicCover:"https://p3fx.kgimg.com/stdmusic/240/20200909/20200909133116283453.jpg",
    musicTimer:"03:49",
    musicLrc:`
    [ti:Take Me Hand (画风风 Bootleg)]
    [ar:画风风]
    [al:失去才懂]
    [by:]
    [offset:0]
    [00:00.00]Take Me Hand (画风风 Bootleg) - 画风风
    [00:15.18]原唱：DAISHI DANCE (ダイシ・ダンス)/Cécile Corbel
    [00:30.36]Lyrics by：Cécile Corbel
    [00:45.54]Composed by：DAISHI DANCE/Tomoharu Moriya
    [01:00.73]In my dreams
    [01:02.77]I feel your light
    [01:04.59]I feel love is born again
    [01:08.17]Fireflies
    [01:10.03]In the moonlight
    [01:12.11]Rising stars
    [01:15.89]Remember
    [01:18.20]The day
    [01:20.19]I fell in love with you
    [01:23.31]Darling won't you break
    [01:27.55]My heart
    [01:31.27]Take my hand now
    [01:33.14]Stay close to me
    [01:35.04]Be my lover
    [01:36.90]Won't you let me go
    [01:38.82]Close your eyes now
    [01:40.70]And you will see
    [01:42.61]There's a rainbow
    [01:44.51]For you and me
    `
  },
];

//获取歌曲的长度,并赋值为常量
const MUSIC_LENGTH=musicList.length;


//定义全局变量，用于保存正在播放第几首歌曲，下标从00开始
let currentMusic=0;

//定义全局变量，用于检测音乐是否播放
let isPlay=true;

//定义全局变量，用于歌曲的进度 以%为单位
let musicProgressPublic=0;

//0.随机播放 1.列表循环 2.单曲循环
//定义全局变量，
let currentPlayType=1;//这里等于 1 的原因是因为我们默认的是列表循环，所以要与其对应



//将歌曲放到页面中
//获取存放li的盒子
(function () {

  const musicListBox=document.querySelector(".music_list");
  for (let i = 0; i < musicList.length; i++) {
    const newLi=document.createElement("li");

    //创建当前是否播放
    const isPlay=document.createElement("div");
    isPlay.className="is_play iconfont";
    isPlay.innerHTML="&#xf034f;";
    isPlay.style.visibility="hidden";
    newLi.appendChild(isPlay);

    //创建名字
    const musicName=document.createElement("div");
    musicName.className="music_name";
    musicName.innerHTML=musicList[i].musicName;
    newLi.appendChild(musicName);

    //创建按钮
    const musicBtn=document.createElement("div");
    musicBtn.className="music_list_btn iconfont";
    const span1=document.createElement("span");
    span1.className="music_play_btn";
    span1.innerHTML="&#xe624;";
    const span2=document.createElement("span");
    span2.className="music_play_delete";
    span2.innerHTML="&#xe68e;";
    musicBtn.appendChild(span1);
    musicBtn.appendChild(span2);
    newLi.appendChild(musicBtn);

    //创建歌手
    const musicSinger=document.createElement("div");
    musicSinger.className="music_singer";
    musicSinger.innerHTML=musicList[i].musicSinger;
    newLi.appendChild(musicSinger);

    //获取时间
    const musicTimer=document.createElement("div");
    musicTimer.className="music_timer";
    musicTimer.innerHTML=musicList[i].musicTimer;
    newLi.appendChild(musicTimer);


    musicListBox.appendChild(newLi);
  }
})();


//ok,接下来是单击歌曲列表的播放按钮
(function () {
  //先获取全部的歌曲列表
  const musicListBox=document.querySelector(".music_list");

  //获取所有歌曲中的播放按钮
  const musicPlayBtns=document.querySelectorAll(".music_play_btn");

  //获取音频标签
  const musicVideo=document.querySelector("video");

  //获取当前是否播放的div盒子
  const isPlayList=document.querySelectorAll(".is_play");

  //获取存放歌词的 ul
  const musicLrcUl=document.querySelector(".music_lrc_ul");

  //获取背景
  const maskImg=document.querySelector(".mask_img");

  //获取音乐封面,用于转动
  const musicCoverImg=document.querySelector(".music_cover_img");

  const playBtn=document.querySelector("#play_btn");//暂停或者播放

  //为了防止重复点击按钮带来的歌曲重写播放和歌词重新播放等问题
  //我们定义一个变量,用来记录是否是重复点击
  let musicIndex=-1;


  for (let i = 0; i <MUSIC_LENGTH; i++) {
    musicPlayBtns[i].addEventListener('click',function (){
      //修改第几首歌曲
      currentMusic=i;
      if (isPlay){
        musicVideo.play();
        this.innerHTML="&#xe629;";
        playBtn.innerHTML="&#xe629;";
      }else{
        musicVideo.pause();
        this.innerHTML="&#xe624;";
        playBtn.innerHTML="&#xe624;";
      }
      isPlay=!isPlay;



      if(musicIndex!==i){
        //让歌词从顶部开始
        musicLrcUl.style.top='0';

        //放歌曲路径 改变按钮和
        this.innerHTML="&#xe629;"
        musicVideo.src=musicList[i].musicUrl;
        isPlayList[i].style.visibility="visible";
        //更换背景
        maskImg.style.backgroundImage=`url('${musicList[i].musicCover}')`;
        //更换封面
        musicCoverImg.src=musicList[i].musicCover;
        //ok,接下来是歌词的填写
        const {lrcContentList,lrcTimeList}=getLrc(musicList[i].musicLrc);
        musicLrcUl.innerHTML="";//清空歌词
        for (let j = 0; j < lrcContentList.length; j++) {
          const newLi=document.createElement("li");
          const a1=lrcTimeList[j].split(".")[0];
          const a2=a1.split(":");
          const secondId=a2[0]*60+a2[1]*1;//将毫秒舍去,然后去除分钟和毫秒,并组成毫秒数
          newLi.id=secondId;
          newLi.className="gechi";
          newLi.innerHTML=lrcContentList[j-1];
          musicLrcUl.appendChild(newLi);
        }
        //定义全局常量，获取全部的歌词DOM元素
        window.GECHILIST=document.querySelectorAll(".gechi");
      }
      musicIndex=i;
      //排他思想
      for (let j = 0; j < i; j++) {
        musicPlayBtns[j].innerHTML="&#xe624;";
        isPlayList[j].style.visibility="hidden";
      }
      for (let j = i+1; j < MUSIC_LENGTH; j++) {
        musicPlayBtns[j].innerHTML="&#xe624;";
        isPlayList[j].style.visibility="hidden";
      }
    });

  }
})();



//其次,我们来写歌词的滚动停止和封面滚动停止
(function () {
  //先获取音频元素
  const video=document.querySelector("video");
  //获取歌词的ul
  const musicLrcUl=document.querySelector(".music_lrc_ul");


  video.addEventListener('timeupdate',function () {
    const id=parseInt(this.currentTime);
    // const lrc=document.querySelector(`#${id}`);
    const currentLrc=document.getElementById(id);
    if (currentLrc){
      for (let i = 0; i < GECHILIST.length; i++) {
        GECHILIST[i].style.fontSize="16px";
        GECHILIST[i].style.color="#fff";
      }
      currentLrc.style.fontSize="20px";
      currentLrc.style.color="deepskyblue";
      musicLrcUl.style.top=`${-currentLrc.offsetTop+140}px`;
    }
  });
})();



//ok，关于音乐播放器控制台左侧的
//我们将有3大功能，分别是上一首，下一首，暂停或播放
(function () {
  const musicPlayBtn=document.querySelectorAll(".music_play_btn");
  const upperBtn=document.querySelector("#upper_btn");//上一首按钮
  const lowerBtn=document.querySelector("#lower_btn");//下一首按钮
  const playBtn=document.querySelector("#play_btn");//暂停或者播放
  const video=document.querySelector("video");

  //上一首
  upperBtn.addEventListener('click',()=>{
    if (currentMusic<=0){
      currentMusic=0;
    }else{
      currentMusic--;
    }
    musicPlayBtn[currentMusic].click();
    isPlay=false;
    playBtn.innerHTML="&#xe629;";
  });

  //下一首
  lowerBtn.addEventListener('click',()=>{
    currentMusic++;
    if (currentMusic>=MUSIC_LENGTH){
      currentMusic=0;
    }
    musicPlayBtn[currentMusic].click();
    isPlay=false;
    playBtn.innerHTML="&#xe629;";
  });

  //获取封面
  const musicCoverImg=document.querySelector(".music_cover_img");
  //接下来我们开始暂停时间的按钮
  playBtn.addEventListener('click',function(){
    if (isPlay){
      musicCoverImg.style.animationPlayState="running";
      video.play();
      this.innerHTML="&#xe629;";
      musicPlayBtn[currentMusic].innerHTML="&#xe629;";
    }else{
      musicCoverImg.style.animationPlayState="paused";
      video.pause();
      this.innerHTML="&#xe624;";
      musicPlayBtn[currentMusic].innerHTML="&#xe624;";
    }
    isPlay=!isPlay;
  })
})();


//ok,接下来我们写进度条的立即执行函数
//这也是我们第一次写音乐进度条，所以这里暂时不写拖曳进度条
//只写点击进度条的时的事件
(function () {
  //获取进度条的三个DOM元素

  //获取进度条的盒子
  const musicProgressBox=document.querySelector("#music_progress_box");
  //获取已经播放的长度
  const musicProgressPlayed=document.querySelector("#music_progress_played");
  //获取进度条的小按钮
  const musicProgress=document.querySelector("#music_progress");

  //音乐播放的时长
  let currentTime="";
  //音乐的总时长
  let duration="";


  //我们需要监听video，所以要获取video
  const video=document.querySelector("video");
  video.addEventListener('canplay',function () {
    duration=this.duration;
  });


  video.addEventListener('timeupdate',function () {
    currentTime=this.currentTime;
    const value=(parseInt(this.currentTime)/this.duration)*100;
    musicProgressPublic=value;
    if (value>=0 && value<=100){
      musicProgressPlayed.style.width=`${value}%`;
      musicProgress.style.left=`${value}%`;
    }
    // console.log(value);
  });

  musicProgressBox.addEventListener('click',function (event) {
    //进度条的全部长度;
    const a=musicProgressBox.offsetWidth;
    const playedWidth=event.clientX-this.offsetLeft;

    const b=playedWidth/a;//获取进度条的百分比
    console.log(b);
    video.currentTime=video.duration*b;//这一步我们开始设置音乐的进度
    //我们获取了进度条的百分比，就可以给时间按照百分比的类型设置

    musicProgressPlayed.style.width=`${playedWidth}px`;
    musicProgress.style.left=`${playedWidth}px`;
  });



})();




//ok，然后我们开始写音乐播放的类型
//0.随机播放 1.列表循环 2.单曲循环
(function () {
  //先实现文本的切换
  //获取盒子
  const playType=document.querySelector("#play_type");
  //获取当前的播放文本
  const currentPlayTypeDom=playType.children[1];
  const video=document.querySelector("video");
  const lowerBtn=document.querySelector("#lower_btn");//下一首按钮
  //获取每个歌曲的播放按钮
  const playTypeList=document.querySelector("#play_type ul");
  //获取每首歌曲的播放按钮
  const musicPlayBtns=document.querySelectorAll(".music_play_btn");

  for (let i = 0; i < playTypeList.children.length; i++) {
    playTypeList.children[i].addEventListener('click',function () {
      if (currentPlayType!==i){
        currentPlayTypeDom.innerHTML=this.innerText;
        currentPlayType=i;
      }

      ///---------------------------------------------
      if (currentPlayType===1){
        //我们来监听音乐播放完毕后暂停时触发 ended
        video.onended=function () {
          //这里我们不要使用 addEventListener
          //因为这个事件我们需要覆盖
          //然后我们需要按照列表循环，所以执行
          // 下一首按钮的单击事件即可
          lowerBtn.click();
          console.log("列表循环");
        }
      }else if (currentPlayType===0){//随机播放
        // 生成随机数
        const randomNum=Math.round(Math.random()*MUSIC_LENGTH);
        console.log(randomNum);
        video.addEventListener('ended',function () {
          musicPlayBtns[randomNum].click();
          console.log('随机播放');
          console.log(randomNum,123);
        });

        //=function () {
        //
        //         }
      }
      ///---------------------------------------------
    });
  }

})();






//最后，我们来写页面的时间
//有三大功能
//上下键改变声音大小，空格键暂停或者播放音乐
//音量键一次调整10%
(function () {
  //获取音量的盒子
  const voiceMask=document.querySelector(".voice_mask");
  //获取当前音量的数字
  const voiceNumber=document.querySelector("#voice_number");
  //获取音频
  const video=document.querySelector("video");

  //暂停或者播放
  const playBtn=document.querySelector("#play_btn");
  //获取所有列表的暂停
  const musicPlayBtn=document.querySelectorAll(".music_play_btn");

  let voiceNum=100;

  let timer="";

  //键盘按下事件
  document.addEventListener('keydown',function (event) {
    console.log(event.key);


    switch (event.key) {
      case "ArrowUp":{//向上键
        voiceNum+=10;
        updateVoice();
        break;
      }
      case "ArrowDown":{//向下键
        voiceNum-=10;
        updateVoice();
        break;
      }
      case " ":{
        if (isPlay){
          video.play();
          playBtn.innerHTML="&#xe629;";
          musicPlayBtn[currentMusic].innerHTML="&#xe629;";
        }else{
          video.pause();
          playBtn.innerHTML="&#xe624;";
          musicPlayBtn[currentMusic].innerHTML="&#xe624;";
        }
        isPlay=!isPlay;
        break;
      }
    }

  })



  function updateVoice() {
    //先清除定时器,不然有时候定时器会重复
    clearTimeout(timer);
    voiceMask.style.opacity="1";

    timer=setTimeout(()=>{
      voiceMask.style.opacity="0";
    },2000)
    if (voiceNum>=100){
      voiceNum=100;
    }
    if (voiceNum<=0){
      voiceNum=0;
    }
    voiceNumber.innerHTML=`${voiceNum}%`
    //改变音乐音量的大小
    video.volume=voiceNum/100;//音量值的范围在 0~1之间
  }

})();




//关于初始化的立即执行函数
//放在这里初始化是因为下一首按钮的方法执行
(function () {
  //我们video开始的歌曲是第一首歌
  const video=document.querySelector("video");
  //下一首按钮
  const lowerBtn=document.querySelector("#lower_btn");
  //获取每首歌曲的播放按钮
  const musicPlayBtns=document.querySelectorAll(".music_play_btn");

  video.src=musicList[0].musicUrl;
  video.onended=function () {
    lowerBtn.click();
  };
  //接着，我们先来实现列表循环，
  console.log(currentPlayType);

})();










